<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width">

  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
  <link rel="mask-icon" href="assets/images/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

  <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
  <link href="assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="assets/vendor/themify-icons/css/themify-icons.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- <link href="assets/vendor/jquery-ui/css/jquery-ui.min.css" rel="stylesheet"> -->
  <!-- <link href="assets/vendor/jquery-ui-sliderbutton/css/jquery.ui.sliderbutton.css" rel="stylesheet"> -->

  <link rel="stylesheet" type="text/css" href="assets/css/style.css">

  <title>SingPass Mobile (TEST) Consent Screen</title>
</head>

<body style="background-color:#F5F5F5;min-height:668px;">

  <!-- consent screen start -->
  <div id="spm-header">
    <div class="container">
      <a href="spm-home.html" class="close-trigger"><span>Close</span></a>
      <strong>SingPass Mobile (TEST)</strong>
    </div>
  </div>

  <div id="main-consent" class="container">
    <div class="row">
      <div class="col-sm-12 mt-2 mb-2">
        <p class="f-20 mb-2">Are you sending your details to:</p>
      </div>
      <div class="col-sm-12">
        <div class="card card-shadow red-top">
          <div class="card-header">
            <div class="text-center mb-0">
              <img src="assets/images/consent-img-blue.png" style="margin: auto;width: 160px;">
              <p class="mt-3 mb-2">
                <strong>SAMPLE APP</strong>
                <br>VISITOR MANAGEMENT EXAMPLE
              </p>
            </div>
          </div>
          <div class="data-list">
            <table style="width: 100%;" id="scopeTable">
            </table>
          </div>
        </div>
        <div class="slide-to-send">
          <input type="range" value="0" class="pullee" onchange="onSlideComplete()"/>
          <span>SLIDE TO SEND</span>
        </div>
      </div>
    </div>
  </div>
  <div id="main-success" class="container">
    <div class="row">
      <div class="col-sm-12 mt-3">
        <div class="card card-shadow full-height-card text-center">
          <div class="success-section">
            <img src="assets/images/blue-loading.gif" class="success-img pb-3">
          </div>
          <span class="verifying-text">VERIFYING</span>
        </div>
      </div>
    </div>
  </div>
  <!-- consent screen end -->


  <script type="text/javascript" src="assets/vendor/jquery-3.4.1.min.js"></script>
  <!-- <script type="text/javascript" src="assets/vendor/jquery-ui/js/jquery-ui.min.js"></script> -->
  <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src='assets/js/custom.js'></script>

  <script>
    $("#main-success").hide();
    function onSlideComplete() {
      slider = document.querySelector('.slide-to-send');
      sliderInput = slider.querySelector('input');


      if(sliderInput.value==100){
        $.ajax({
  				url: "/myinfo",
  				data: {},
  				type: "GET", // get from serverside
          beforeSend: function() {
            // Showing loading screen until getting a response
            $("#main-consent").hide();
            $("#main-success").show();
          },
  				success: function(data) {
  					// successful response from serverside
  					if (data.statusCode == 200) { // successful
  						// fill up the application form
              window.location.href = "spm-success.html";
              // window.location.href = "spm-loading.html";

  					}
  				},
          error: function(data) {
            $("#main-success").hide();
            $("#main-consent").show();
            alert("ERROR:" + JSON.stringify(data));
          }
  			});
      }
    }

    $.ajax({
        url: "/getscope",
        type: "GET",
        success: function(data) {
          populate(JSON.parse(data));
        },
        dataType: "json",
        timeout: 5000
    });

    function populate(arr){
    	var table = document.getElementById("scopeTable");
      for(let i = 0; i < arr.length; i++){
      	let row = table.insertRow(i);
          row.className = "data-row sep-below";
          var cell = row.insertCell(0);
          cell.className = "text-label";
          cell.innerHTML = arr[i].desc;
      }
    }

    function formatDate(date) {
      var d = new Date(date);
      var monthNames = [
        "Jan", "Feb", "Mar",
        "Apr", "May", "Jun", "Jul",
        "Aug", "Sep", "Oct",
        "Nov", "Dec"
      ];

      var day = d.getDate();
      var monthIndex = d.getMonth();
      var year = d.getFullYear();

      return day + ' ' + monthNames[monthIndex] + ' ' + year;
    }

  </script>
</body>

</html>
